/*
 * This file is part of Cockpit.
 *
 * Copyright (C) 2015 Red Hat, Inc.
 *
 * Cockpit is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * Cockpit is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with Cockpit; If not, see <https://www.gnu.org/licenses/>.
 */
@use "ct-card";
@use "page";
@use "table";
@use "journal";
@import "global-variables";
@import "@patternfly/patternfly/components/Card/card.scss";
@import "@patternfly/patternfly/components/Progress/progress.scss";
@import "@patternfly/patternfly/utilities/Flex/flex.scss";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@import "@patternfly/patternfly/utilities/Alignment/alignment.scss";

#storage .pf-v5-c-card {
  @extend .ct-card;
}

.ct-card.pf-v5-c-card .pf-v5-c-card__title-text.ct-card-small-title {
  font-size: var(--pf-v5-global--FontSize--xl);
}

// Only used in iSCSI dialog
.dialog-select-row-table {
  inline-size: 100%;

  td {
    text-align: start;
    padding-block: 0.75em;
    padding-inline: 0;
    vertical-align: top;
    border: 1px solid #d1d1d1;

    &:first-child {
      border-inline-end-width: 0;
    }

    &:last-child {
      border-inline-start-width: 0;
    }
  }

  th {font-weight: bold;
    text-align: start;
    color: var(--pf-v5-global--palette--black-800);
    padding-block: 0.75em;
    padding-inline: 0;
  }

  td, th {
    &:first-child {
      padding-inline-start: 0.75em;
    }

    &:last-child {
      padding-inline-end: 0.75em;
    }
  }
}

div.progress {
  inline-size: 100%;
  block-size: var(--pf-v5-global--FontSize-xs);
}

td.job-description {
  inline-size: 50%;
}

td.job-action {
  text-align: end;
}

.storage-graph {
  block-size: 180px;
}

.dialog-item-tooltip {
  margin-inline-start: 5px;
  padding: 0;
  white-space: nowrap;
}

.modal-footer-teardown {
  text-align: start;
}

.pf-v5-c-modal-box__body table {
  --pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
}

* + .modal-footer-teardown {
  padding-block-start: var(--pf-v5-global--spacer--xl);
}

// FIXME: This is visual only; it needs to be fixed for a11y reasons, likely at the JSX level
.indent {
  padding-inline-start: calc(var(--pf-v5-global--spacer--md) * min(var(--level, 0), 10));
  white-space: nowrap;
}

// FIXME: Is this used?
a.disabled {
  color: var(--pf-v5-global--palette--light-blue-200);
  text-decoration: none;
  cursor: not-allowed;
}

.widest-title {
  visibility: hidden;
  block-size: 0;
}

.sigkey-hash {
  font-family: monospace;
  font-size: 140%;
}

.pf-v5-c-modal-box h3 {
  margin-block-start: 0;
  line-height: 24px;
}

.delete-resource-dangerous {
  color: var(--pf-v5-global--danger-color--200);
}

.pf-v5-c-modal-box .slot-warning {
  color: var(--pf-v5-global--danger-color--200);
}

// This is needed to avoid showing scrollbar in dialog
.size-slider {
  padding-block-end: var(--pf-v5-global--spacer--xs);
}

.panel-heading {
  position: static;
}

.storage-alert-actions button {
  margin-block: 0.5rem 0.2rem;
  margin-inline: 0 0.2rem;
}

// FIXME: There's probably a better way to do this.
// We wrap the data list row with a label to make checkboxes clickable from the whole row
// we need this HACK in order to make alignRight property take effect
.data-list-row-checkbox-label {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.crypto-keyslots-list {
  border: none;
}

// So that "Stored passphrase" fits
.pf-v5-c-description-list.wide-label {
  --pf-v5-c-description-list--m-horizontal__term--width: minmax(0, 18ch);
}

.pf-v5-c-description-list .pf-v5-c-progress {
  max-inline-size: 30ch;
}

.usage-bar {
  --bg-color: var(--pf-v5-global--primary-color--100);
  display: inline-block;
  inline-size: 20em;
  block-size: 1rem;
  margin-inline-start: 1em;
  position: relative;
  inset-block-start: 0.15rem; // XXX - center it
  inset-inline-start: 0;

  &-short {
    inline-size: 3.5em;
  }

  &-danger {
    --bg-color: var(--pf-v5-global--danger-color--100);
  }

  &-empty {
    --bg-color: none;
  }

  &-indicator {
    display: inline-block;
    background: var(--bg-color);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100%;
  }

  // Hatched effect for progressbars that are parts of a group, but not the main
  &-other {
    // Use the page's default background color
    --bg-light: var(--pf-v5-global--BackgroundColor--100);
    // Alternate with the used color of the progress bar
    --bg-dark: var(--bg-color);
    // Repeat a gradient with hard stops, a perfect slant, and a consistency
    // with all "other" hatched backgrounds
    background: repeating-linear-gradient(
      -45deg,
      var(--bg-light),
      var(--bg-light) 25%,
      var(--bg-dark) 25%,
      var(--bg-dark) 50%,
      var(--bg-light) 50%
    ) top left;
    background-size: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--sm);
    // Overlay at 1/3  to mix the light and dark against the through color
    opacity: 0.333;
  }

  &::before {
    display: inline-block;
    content: "";
    background: var(--bg-color);
    opacity: 0.2;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
  }
}

.storage-pvs-box {
  border: 1px solid var(--pf-v5-global--palette--purple-400);
  background: var(--pf-v5-global--palette--purple-100);

  .pf-v5-theme-dark & {
    border-color: var(--pf-v5-global--palette--purple-300);
    background: var(--pf-v5-global--palette--purple-500);
  }
}

.storage-pvs-pv-box {
  padding: 0.3em;

  &:not(:last-child) {
    border-inline-end: 1px solid var(--pf-v5-global--palette--purple-400);
  }

  .pf-v5-theme-dark & {
    border-color: var(--pf-v5-global--palette--purple-300);
  }
}

.storage-pvs-pv-box-dev {
  font-size: 120%;
  font-weight: bold;
}

.storage-stripe-box {
  border: 1px solid var(--pf-v5-global--palette--purple-400);
  background: var(--pf-v5-global--palette--purple-100);

  .pf-v5-theme-dark & {
    border-color: var(--pf-v5-global--palette--purple-300);
    background: var(--pf-v5-global--palette--purple-500);
  }
}

.storage-stripe-pv-box {
  padding: 0.3em;
}

.storage-stripe-pv-box:not(:last-child) {
  border-block-end: 1px solid var(--pf-v5-global--palette--purple-400);

  .pf-v5-theme-dark & {
    border-color: var(--pf-v5-global--palette--purple-300);
  }
}

.storage-stripe-pv-box-dev {
  // FIXME: Font size should be a PF size, not a relative percentage
  font-size: 120%;
  font-weight: bold;
}

.remove-border {
  border-block-end: 0 !important;
}

.ct-small-table-card {
    border-block-start: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
}

.ct-clickable-card:hover {
    background: var(--pf-v5-global--BackgroundColor--150);
    box-shadow: var(--pf-v5-global--BoxShadow--md);
    cursor: pointer;
}

.storage-menu-title {
    text-align: start;
    white-space: nowrap !important;
}

.pf-v5-c-table__tbody .storage-device-icon {
  --icon-size: 18px;
  // Ensure the icon's cell size is as minimal as the icon allows
  // (WebKit needs a size; 0 doesn't work for it)
  inline-size: 1px;
  // Remove unnecessary padding
  padding-inline-end: 0;

  > svg {
    // Bump the icon down to align with text, based on the difference between icon and text size, just for the top
    inset-block-start: calc((var(--pf-v5-global--spacer--md) * var(--pf-v5-global--LineHeight--md) - var(--icon-size)) / 2);
    position: relative;

    path {
      fill: var(--pf-v5-global--Color--200);
    }
  }
}

.storage-size-column {
    text-align: end;
    white-space: nowrap !important;
}

.storage-size-column-header {
    text-align: end;
    // Align the "Size" header with the text of the usage bars.
    // var(--pf-v5-global--spacer--sm): padding of compact td cells
    // 3.5em: width of short progress bars
    // 1em: margin between text and progress bar
    padding-inline-end: calc(var(--pf-v5-global--spacer--sm) + 3.5em + 1em) !important;
}
